<template>
    <div :style="regular?'position: absolute;width: 100%;z-index: 99;':''">
        <div :class="'nav-header-main '+(navBarFixed?'nav-header-ceiling':'')" :style="{'background-color':backColor}" >
            <div class="nav-header-logo">
                <slot name="logo"></slot>
            </div>
            <div class="nav-header-items">
                <ul>
                    <li :class="defaultActive==menu.router?'nav-active':''" v-for="(menu,index) in menuList" :key="index" @click="gotoPage(index)">
                        {{ menu.name }}
                    </li>
                </ul>
            </div>
            <div class="nav-header-ability">
                <slot name="ability"></slot>
                
            </div>
        </div>
        
    </div>

</template>

<script>
import { watch } from 'vue';
export default {

    data(){

        return{
            navBarFixed:false,
            navBarTop:110,
            backColor:'#007aff',
            
        }
    },
    props:['regular','ceiling','defaultActive','menuList','color','ceilingColor'],
    methods:{
        watchScroll(){
           
            if(this.ceiling){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                 
                this.navBarFixed = scrollTop > this.navBarTop?true:false;
            }
        },
        gotoPage(index){
            this.$router.push(this.menuList[index].router);
        }
    },
    mounted(){
        
        if(this.ceiling){
            window.addEventListener("scroll", this.watchScroll);//创建监听器
        }
        
        
    },
    beforeDestroy(){
        if(this.ceiling){
            window.removeEventListener("scroll", this.watchScroll);//移除监听器
        }
    },
    created(){
        if(this.$props['color']){
            this.backColor=this.$props['color'];
        }
    },
    watch:{
        navBarFixed(newValue){
            // console.log('new',newValue);
            if(newValue){
                this.backColor=this.ceilingColor;
            }else{
                this.backColor=this.color;
            }

        }


    }

}
</script>

<style scoped>
.nav-header-main{
    width: 100%;
    height: 80px;
    z-index: 99;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
.nav-header-ceiling{
    position: fixed;
    background-color: #1E171F;
    top: 0;
    animation: fadeInDown 400ms;

}
.nav-header-logo{
    justify-content: flex-start;
    width: 20%;
    color: #fff;
}
.nav-header-items{
    width: 50%;
}
ul{
    list-style:none;    
    display:flex;
    justify-content: center;
    gap: 10px;
}
ul>li{
    color: #fff;
    
}
ul>li:hover{
    cursor: pointer;
    color: #FF9B00;
}
.nav-active{
    color: #FF9B00;
}
.nav-header-ability{
    display: flex;
    justify-content: flex-end;
    color: #fff;
    width: 20%;
}

</style>